<DocMatRadioButton></DocMatRadioButton>
<DocMatRadioGroup Secondary="true"></DocMatRadioGroup>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        <MatH5>Gender</MatH5>
        <MatRadioGroup @bind-Value="@Val1" TValue="string">
            <MatRadioButton Value="@string.Empty" TValue="string">Default</MatRadioButton>
            <MatRadioButton Value="@("f")" Label="Female" TValue="string"></MatRadioButton>
            <MatRadioButton Value="@("m")" TValue="string">Male</MatRadioButton>
            <MatRadioButton Value="@("d")" Disabled="true" TValue="string">Disabled</MatRadioButton>
        </MatRadioGroup>
        <div>
            <b>Selected value: </b>
            <b>@Val1</b>
            <MatButton OnClick="@((e) => { Val1 = "m"; })">Set Male</MatButton>
        </div>

        <h3>Items: @Val3</h3>
        <MatRadioGroup @bind-Value="@Val3" Items="@Val3Items">
        </MatRadioGroup>

        <h3>Items with ItemTemplate: @Val3</h3>
        <MatRadioGroup @bind-Value="@Val3" Items="@Val3Items">
            <ItemTemplate>
                <div>
                    <MatIcon>@MatIconNames.Arrow_forward</MatIcon>
                    <MatRadioButton Value="@context">@context</MatRadioButton>
                </div>
            </ItemTemplate>
        </MatRadioGroup>


        @code
        {

            protected string Val1;

            protected string Val3;

            protected string[] Val3Items =
            {
                "Winter",
                "Spring",
                "Summer",
                "Autumn"
            };

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatH5>Gender</MatH5>
        <MatRadioGroup @bind-Value=""@Val1"" TValue=""string"">
            <MatRadioButton Value=""@string.Empty"" TValue=""string"">Default</MatRadioButton>
            <MatRadioButton Value=""@(""f"")"" Label=""Female"" TValue=""string""></MatRadioButton>
            <MatRadioButton Value=""@(""m"")"" TValue=""string"">Male</MatRadioButton>
            <MatRadioButton Value=""@(""d"")"" Disabled=""true"" TValue=""string"">Disabled</MatRadioButton>
        </MatRadioGroup>
        <div>
            <b>Selected value: </b>
            <b>@Val1</b>
            <MatButton OnClick=""@((e) => { Val1 = ""m""; })"">Set Male</MatButton>
        </div>

        <h3>Items: @Val3</h3>
        <MatRadioGroup @bind-Value=""@Val3"" Items=""@Val3Items"">
        </MatRadioGroup>

        <h3>Items with ItemTemplate: @Val3</h3>
        <MatRadioGroup @bind-Value=""@Val3"" Items=""@Val3Items"">
            <ItemTemplate>
                <div>
                    <MatIcon>@MatIconNames.Arrow_forward</MatIcon>
                    <MatRadioButton Value=""@context"">@context</MatRadioButton>
                </div>
            </ItemTemplate>
        </MatRadioGroup>


        @code
        {

            protected string Val1;

            protected string Val3;

            protected string[] Val3Items =
            {
                ""Winter"",
                ""Spring"",
                ""Summer"",
                ""Autumn""
            };

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Custom Class</h5>
<DemoContainer>
    <Content>

        <h3>Car Items: @carValue?.Name</h3>
        <MatRadioGroup @bind-Value="@carValue" Items="@carOptions">
        </MatRadioGroup>

        <h3>Car Items with ItemTemplate: @carValue?.Name</h3>
        <MatRadioGroup @bind-Value="@carValue" Items="@carOptions">
            <ItemTemplate>
                <div>
                    <MatRadioButton Value="@context">@context.Name : @context.Price</MatRadioButton>
                </div>
            </ItemTemplate>
        </MatRadioGroup>


        @code
        {

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }

                public override string ToString()
                {
                    return Name;
                }


                public Car(string name, double price)
                {
                    Name = name;
                    Price = price;
                }
            }

            Car carValue = null;

            Car[] carOptions = new[]
            {
                new Car("Volkswagen Golf", 10000),
                new Car("Volkswagen Passat", 11000),
                new Car("Volkswagen Polo", 12000),
                new Car("Ford Focus", 13000),
                new Car("Ford Fiesta", 14000),
                new Car("Ford Fusion", 15000),
                new Car("Ford Mondeo", 16000),
            };

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <h3>Car Items: @carValue?.Name</h3>
        <MatRadioGroup @bind-Value=""@carValue"" Items=""@carOptions"">
        </MatRadioGroup>

        <h3>Car Items with ItemTemplate: @carValue?.Name</h3>
        <MatRadioGroup @bind-Value=""@carValue"" Items=""@carOptions"">
            <ItemTemplate>
                <div>
                    <MatRadioButton Value=""@context"">@context.Name : @context.Price</MatRadioButton>
                </div>
            </ItemTemplate>
        </MatRadioGroup>


        @code
        {

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }

                public override string ToString()
                {
                    return Name;
                }


                public Car(string name, double price)
                {
                    Name = name;
                    Price = price;
                }
            }

            Car carValue = null;

            Car[] carOptions = new[]
            {
                new Car(""Volkswagen Golf"", 10000),
                new Car(""Volkswagen Passat"", 11000),
                new Car(""Volkswagen Polo"", 12000),
                new Car(""Ford Focus"", 13000),
                new Car(""Ford Fiesta"", 14000),
                new Car(""Ford Fusion"", 15000),
                new Car(""Ford Mondeo"", 16000),
            };

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Enum</h5>
<DemoContainer>
    <Content>
        <MatRadioGroup @bind-Value="@sex" Items="@(Enum.GetValues(typeof(Sex)).Cast<Sex>())">
        </MatRadioGroup>


        @code
        {
            Sex sex;

            enum Sex
            {
                None,
                Male,
                Female,
                Other
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatRadioGroup @bind-Value=""@sex"" Items=""@(Enum.GetValues(typeof(Sex)).Cast<Sex>())"">
        </MatRadioGroup>


        @code
        {
            Sex sex;

            enum Sex
            {
                None,
                Male,
                Female,
                Other
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>